<div class="order">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="100px" style="width: 100%;">
        <el-form-item class="label" label="订单号" size="mini">
            <el-col>
                <el-input v-model="searchForm.orderNo" placeholder="订单号" suffix-icon="el-icon-tickets"></el-input>
            </el-col>
        </el-form-item>

        <el-form-item size="mini" class="label" label="代理商" v-if="checkPermission('searchLifeManager')">
            <el-col>
                <el-select filterable  v-model="searchForm.lifeManager" placeholder="代理商" @change="changeSelect('lifeManager')">
                    <el-option label="所有" value=""></el-option>
                    <el-option :label="item.label" v-for="(item,index) in searchOptions.lifeManagerUser"
                        :value="item.value"></el-option>
                </el-select>
            </el-col>
        </el-form-item>


        <el-form-item size="mini" label="生活号">
            <el-select filterable  v-model="searchForm.life" placeholder="生活号" @change="changeSelect('life')">
                <el-option label="所有" value=""></el-option>
                <el-option :label="item.label" v-for="(item,index) in searchOptions.life" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item size="mini" label="话务员" v-if="checkPermission('searchSales')">
            <el-select filterable  v-model="searchForm.saler" placeholder="话务员">
                <el-option label="所有" value=""></el-option>
                <el-option :label="item.label" v-for="(item,index) in searchOptions.salesUser" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item size="mini" label="商品名称">
            <el-select filterable  v-model="searchForm.product" placeholder="商品名称">
                <el-option label="所有" value=""></el-option>
                <el-option :label="item.label" v-for="(item,index) in searchOptions.product" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item size="mini" label="订单状态">
            <el-select v-model="searchForm.status" placeholder="订单状态">
                <el-option label="所有" value=""></el-option>
                <el-option :label="item.label" v-for="(item,index) in searchOptions.orderStatusSearchOptions"
                    :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item size="mini" label="申请人">
            <el-input v-model="searchForm.applyUer" placeholder="申请人" suffix-icon="el-icon-tickets"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="联系电话">
            <el-col>
                <el-input maxlength=13 v-model="searchForm.tel" placeholder="联系电话" suffix-icon="el-icon-tickets">
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item size="mini" label="申请时间">
            <el-date-picker v-model="searchForm.startDate" value-format="yyyy-MM-dd HH:mm:ss" type="date"
                placeholder="开始时间"></el-date-picker>
            -
            <el-date-picker v-model="searchForm.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item size="mini" label="是否免押">
            <el-col>
                <el-select v-model="searchForm.isFeeDeposit" placeholder="是否免押">
                    <el-option label="所有" value=""></el-option>
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                    </el-option>
                </el-select>
            </el-col>
        </el-form-item>
    </el-form>
    <div>
        <el-row >
            <el-col tag="span" style="width: 70px;">
                <el-button  size="mini" type="primary" @click="onSubmit()">查询</el-button>
            </el-col>
            <el-col tag="span"  style="width: 100px;">
                <el-button  size="mini" type="primary" @click="batchIssue()" v-if="checkPermission('lifeManagerAndSaler')">批量过期</el-button>
            </el-col>
            <el-col tag="span"   style="width: 70px;">
                <el-button size="mini" type="primary" label="right" @click="download()">下载</el-button>
            </el-col>
            <el-col tag="span"   style="width: 70px;" v-if="checkPermission('lifeManagerAndSaler')">
                <el-upload name="file" ref="upload" class="upload-demo" :action="fileAction" :limit="1"
                    :headers="uploadHead" :show-file-list=false :before-upload="beforeUpload"
                    :on-success="successUpload" :on-error="successUpload">
                    <el-button size="mini" type="primary">上传</el-button>
                </el-upload>
                </el-upload>
            </el-col>
            <el-col tag="span" style="width: 270px;" v-if="uploadFileName">
                <el-link @click="removeFile()" :underline="false">{{uploadFileName}}<i
                        class="el-icon-close el-icon--right"></i> </el-link>
            </el-col>
        </el-row>
    </div>

    <el-table :data="tableData" class="font12"  cell-style="padding:7px" border=true style="width: 100%;margin-top: 10px" fit=false stripe=true>
        <el-table-column class="gutter" align="center" label="序号" width="80px">
            <template scope="scope"  ><div class="font12" style= "text-align: center">{{scope.$index+(pageInfo.currentPage - 1) * pageInfo.pageSize + 1}}
            </div></template>
        </el-table-column>
        <el-table-column class="gutter" align="center" label="订单号">
            <template slot-scope="scope">
                <el-link class="font12" type="primary" @click="openDetail(scope.row.id,'detail') ">{{scope.row.orderNo}}</el-link>
            </template>
        </el-table-column>
        <el-table-column class="gutter" align="center" prop="lifeManagerName" label="代理商"
            v-if="checkPermission('searchLifeManager')">
        </el-table-column>
        <el-table-column class="gutter" prop="salesName" align="center" label="话务员"
            v-if="checkPermission('searchSales')">
        </el-table-column>
        <el-table-column class="gutter" prop="lifeName" align="center" label="生活号"
            v-if="checkPermission('searchSales')">
        </el-table-column>
        <el-table-column class="gutter" prop="productName" align="center" show-overflow-tooltip=true label="商品名称">
        </el-table-column>
        <el-table-column class="gutter" align="center" label="订单状态">
            <template scope="scope">
                <el-link class="font12" type="primary" @click="openSteps(scope.row.orderNo) ">
                    {{orderStatusJson[scope.row.orderStatus]}}
                </el-link>
            </template>
        </el-table-column>
        <el-table-column class="gutter" align="center" label="是否激活">
            <template
                scope="scope"><span>{{scope.row.isActivation?YesOrType[scope.row.isActivation]:scope.row.isActivation}}
                </span></template>
        </el-table-column>

        <el-table-column class="gutter" prop="applyUserName" align="center" label="申请人">
        </el-table-column>
        <el-table-column class="gutter" prop="applyTel" align="center" label="手机号码">
        </el-table-column>

        <el-table-column class="gutter" prop="applyTime" align="center" label="申请时间">
        </el-table-column>
        <el-table-column class="gutter" prop="address" align="center" label="操作">
            <template slot-scope="scope">
                <!--  <el-button @click="openSteps(scope.row.id)" type="text" size="small">查看流程</el-button> -->
                <el-button @click="openSent(scope.row)" type="text" size="small"
                    v-if="checkPermission('lifeManagerAndSaler')&& scope.row.orderStatus == 'PAY'">发货</el-button>
                <el-button @click="issue('0',scope.row)" type="text" size="small"
                    v-if="checkPermission('lifeManagerAndSaler')&& scope.row.orderStatus == 'SENT'">过期</el-button>
                <el-button @click="issue('1',scope.row)" type="text" size="small"
                    v-if="checkPermission('lifeManagerAndSaler')&& scope.row.orderStatus == 'SENT'">激活</el-button>
                <el-button type="text" size="small" @click="openCancel(scope.row)"
                    v-if="checkPermission('lifeManagerAndSaler')&& (scope.row.orderStatus != 'CANCEL' )">退款</el-button>

                <!-- <el-button type="text" size="small" @click="openDelete(scope.row)"
                    v-if="checkPermission('lifeManagerAndSaler')&& (scope.row.orderStatus == 'CANCEL' )">删除订单
                </el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <div class="marginT10 center">
        <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
            :page-size="pageInfo.pageSize" :total="pageInfo.totalPage" :pager-count="5" :current-page="pageInfo.currentPage">
        </el-pagination>
    </div>

    <el-dialog :title="(detailData.openType=='detail'?'订单详情:':'退款:')+detailData.orderNo" :visible.sync="detailDialog"
        width="55%">

        <el-form ref="detailDataForm" :model="detailData">
            <el-row v-if="detailData.openType=='cancel'" style="margin-bottom: 20px">
                <el-col :span=16>
                    <el-col style="color: #E6A23C" :span=12>提醒 : 退款后会取消订单且无法更改</el-col>
                </el-col>

            </el-row>
            <el-row v-if="detailData.orderStatus=='SENT'|| detailData.orderStatus=='PAY'" style="margin-bottom: 20px">
                <!--    <el-col :span=16>
                    <el-col style="color: #E6A23C">:{{detailData.lastActivationTime}}</el-col>
                </el-col> -->
                <el-col :span=16 style="color: #E6A23C">
                    <el-col :span=6>可激活时间:</el-col>
                    <el-col :span=16> {{detailData.lastActivationTime}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20" v-if="newOrderStatusLog&&newOrderStatusLog.source=='CMS'">
                <!--    <el-col :span=16>
                    <el-col style="color: #E6A23C">:{{detailData.lastActivationTime}}</el-col>
                </el-col> -->
                <el-col :span=16>
                    <el-col :span=6>更新人:</el-col>
                    <el-col :span=16> {{newOrderStatusLog.createBy}}</el-col>
                </el-col>
                <el-col :span=8>
                    <el-col :span=8>更新时间:</el-col>
                    <el-col :span=14> {{newOrderStatusLog.createAt}}</el-col>
                </el-col>
            </el-row>

            <el-row v-if="checkPermission('searchLifeManager')" class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>代理商:</el-col>
                    <el-col :span=16> {{detailData.lifeManagerName}}</el-col>
                </el-col>
                <el-col :span=8>
                    <el-col :span=8>订单状态:</el-col>
                    <el-col :span=14> {{orderStatusJson[detailData.orderStatus]}}</el-col>
                </el-col>
            </el-row>
            <el-row v-if="!checkPermission('searchLifeManager')" class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>订单状态:</el-col>
                    <el-col :span=16> {{orderStatusJson[detailData.orderStatus]}}</el-col>
                </el-col>
                <el-col :span=8>
                    <el-col :span=8></el-col>
                    <el-col :span=14> </el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>话务员:</el-col>
                    <el-col :span=16> {{detailData.salesName}}</el-col>
                </el-col>
                <el-col :span=8>
                    <el-col :span=8>生活号:</el-col>
                    <el-col :span=14> {{detailData.lifeName}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>商品名称:</el-col>
                    <el-col :span=16> {{detailData.productName}}</el-col>
                </el-col>

                <el-col :span=8>
                    <el-col :span=8>申请人:</el-col>
                    <el-col :span=14> {{detailData.applyUserName}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>联系电话:</el-col>
                    <el-col :span=16> {{detailData.applyTel}}</el-col>
                </el-col>

                <el-col :span=8>
                    <el-col :span=8>申请时间:</el-col>
                    <el-col :span=14> {{detailData.applyTime}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>是否发货:</el-col>
                    <el-col :span=16>
                        <el-radio-group v-model="detailData.isSend">
                            <el-radio :disabled="true" label="1">是</el-radio>
                            <el-radio :disabled="true" label="0">否</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-col>
                <el-col :span=8 v-if="detailData.isSend">
                    <el-col :span=8>发货时间:</el-col>
                    <el-col :span=14> {{detailData.deliveryTime}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20" v-if="detailData.isSend">
                <el-col :span=16>
                    <el-col :span=6>快递公司:</el-col>
                    <el-col :span=16> {{detailData.deliveryCompany}}</el-col>
                </el-col>

                <el-col :span=8>
                    <el-col :span=8>快递单号:</el-col>
                    <el-col :span=14> {{detailData.deliveryOrder}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>发货地址:</el-col>
                    <el-col :span=18>{{detailData.location}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>发货备注:</el-col>
                    <el-col :span=18>{{detailData.deliveryRemark}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>是否免押:</el-col>
                    <el-col :span=16>
                        <el-radio :disabled="true" v-model="detailData.isFeeDeposit" label="1">是</el-radio>
                        <el-radio :disabled="true" v-model="detailData.isFeeDeposit" label="0">否</el-radio>
                    </el-col>
                </el-col>
                <el-col :span=8>

                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>是否激活:</el-col>
                    <el-col :span=16>
                        <el-radio :disabled="true" v-model="detailData.isActivation" label="1">是</el-radio>
                        <el-radio :disabled="true" v-model="detailData.isActivation" label="0">否</el-radio>
                    </el-col>
                </el-col>
                <el-col :span=8>
                    <el-col :span=8>激活时间:</el-col>
                    <el-col :span=14> {{detailData.activationTime}}</el-col>
                </el-col>
            </el-row>
            <el-row class="marginT20">
                <el-col :span=16>
                    <el-col :span=6>应收金额:</el-col>
                    <el-col :span=16> {{detailData.payDeposit?detailData.payDeposit/100:detailData.payDeposit}}</el-col>
                </el-col>
                </el-col>
                <el-col :span=8>
                    <el-col :span=8>实收金额:</el-col>
                    <el-col :span=14>{{detailData.paiedPremium?detailData.paiedPremium/100:detailData.paiedPremium}}
                    </el-col>
                </el-col>
            </el-row>
            <div v-if="detailData.openType!='cancel'">
                <el-row class="marginT20">
                    <el-col :span=16>
                        <el-col :span=6>是否退款:</el-col>
                        <el-col :span=16>
                            <el-radio :disabled="true" v-model="detailData.isRefund" label="1">是</el-radio>
                            <el-radio :disabled="true" v-model="detailData.isRefund" label="0">否</el-radio>
                        </el-col>
                    </el-col>
                    <el-col :span=8>
                        <el-col :span=8>退款金额:</el-col>
                        <el-col :span=14>
                            {{detailData.refundPremium?detailData.refundPremium/100:detailData.refundPremium}}
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="marginT20">
                    <el-col :span=16>
                        <el-col :span=6>退款备注:</el-col>
                        <el-col :span=16 style="line-height: 22px;"> {{detailData.remark}}</el-col>
                    </el-col>
                    <el-col :span=8>
                        <el-col :span=8>退款时间:</el-col>
                        <el-col :span=14> {{detailData.refundTime}}</el-col>
                    </el-col>
                </el-row>
            </div>
            <div
                v-if="detailData.openType=='cancel'&&(detailData.orderStatus == 'ISSUE' ||detailData.orderStatus == 'SENT'||detailData.orderStatus == 'PAY' )">
                <el-row class="marginT20">
                    <el-col :span=16>
                        <el-col :span=6>退款原因:</el-col>
                        <el-col :span=18>
                            <el-form-item prop="remark"
                                :rules="[{ required: true, message: '请输入退款原因', trigger: 'blur' }]">
                                <el-input show-word-limit maxlength="100" :disabled="false" v-model="detailData.remark"
                                    type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容">
                                </el-input>
                            </el-form-item>

                        </el-col>
                    </el-col>
                </el-row>
            </div>

        </el-form>
        <div slot="footer" class="dialog-footer" v-if="detailData.openType=='cancel'">
            <el-button @click="detailDialog = false">取 消</el-button>
            <el-button type="primary" @click="submitCance()">退 款</el-button>
        </div>

        <div slot="footer" class="dialog-footer" v-if="detailData.openType=='detail'&&detailData.orderStatus == 'SENT'&&checkPermission('lifeManagerAndSaler')">
            <el-button  type="primary" @click="detailDialog = false;issue('0',detailData)">过 期</el-button>
            <el-button type="primary" @click="detailDialog = false;issue('1',detailData)">激 活</el-button>
        </div>
    </el-dialog>

    <el-dialog title="订单流程" :visible.sync="showSteps " width="30%">
        <div style="height: 400px;">
            <el-steps direction="vertical" :active="stepList.length" space="30%">
                <el-step :title="orderStatusJson[item.status]" :description="item.remark"
                    v-for="(item,index) in stepList">
                    <template :data="item" slot="title">
                        <div>
                            <el-row :span=15>
                                <el-col :span=3> {{orderStatusJson[item.status]}}</el-col>
                                <el-col :span=5 style="font-size: 12px;">
                                    {{item.createBy}}
                                </el-col>
                                <el-col :span=10 style="font-size: 12px;">
                                    {{item.createAt}}
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-step>

            </el-steps>
        </div>

        <!-- <div class="delate-step" >
        　　<div style="width: 100%; height: 300px; padding-bottom: 40px; display: table;margin-top: 10px;">
        　　　　<div class="delate-step-lt">
        　　　　　　<div 　class="delate-time" :style="{'top': `${index*((300)/(stepList.length-1))-4*(index+1)}px`}" v-for="(item, index) in stepList" :key="index"　>
                        <el-row >
                            <el-col>
                                {{item.createBy}}
                            </el-col>
                            <el-col>
                                {{item.createAt}}
                            </el-col>
                        </el-row>
                   </div>
        　　　　　　</div>
        　　　　　　<div class="delate-step-rt">
        　　　　　　　　<el-steps direction="vertical" :active="3" :space="(300)/stepList.length">
        　　　　　　　　<el-step
        　　　　　　　　　　:title="orderStatusJson[item.status]"  :description="item.remark" v-for="(item,index) in stepList"></el-step>
        　　　　　　</el-steps>
        　　　　</div>
        　　</div>
        </div> -->

    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>{{dialogVisibleMsg}}</span>
        <span slot="footer" class="dialog-footer">
            <!--  <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>





    <el-dialog title="发货" :visible.sync="sentDialogFormVisible">
        <el-form :model="sentForm" ref="sentForm">
            <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="sentForm.orderNo" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" :label-width="formLabelWidth" >
                <el-input v-model="sentForm.productName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>


            <el-form-item label="收货人" :label-width="formLabelWidth">
                <el-input v-model="sentForm.applyUserName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="收货地址" :label-width="formLabelWidth">
                <el-input v-model="sentForm.location" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="sentForm.applyTel" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="快递公司" :label-width="formLabelWidth" prop="deliveryCompany" :rules="[
      { required: true, message: '请输入快递公司', trigger: 'blur' }
    ]">
                <el-input v-model="sentForm.deliveryCompany" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="快递单号" :label-width="formLabelWidth" prop="deliveryOrder" :rules="[
        { required: true, message: '请输入快递公司', trigger: 'blur' }
    ]">
                <el-input v-model="sentForm.deliveryOrder" autocomplete="off"></el-input>
            </el-form-item>
           
            <el-form-item label="快递时间" :label-width="formLabelWidth" prop="deliveryTime" :rules="[
        { required: true, message: '请输入快递公司', trigger: 'blur' }
    ]">
                <el-date-picker v-model="sentForm.deliveryTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                    placeholder="选择时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="发货备注" :label-width="formLabelWidth" prop="deliveryRemark" >
                    <el-input v-model="sentForm.deliveryRemark" autocomplete="off"></el-input>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="sentDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sent()">确 定</el-button>
        </div>
    </el-dialog>
</div>